<template>
  <view class="content">
    <swiper class="swiper" :autoplay="false" :duration="200" easing-function="easeOutCubic" @change="swiperChange" :current="tabbarIndex">
      <swiper-item v-for="(item, index) in pageList" :key="index" style="height: 100vh; overflow: scroll">
        <pageIndex :jsonPage="jsonPage" v-if="item.link == '/pages/index/index'"></pageIndex>
        <!-- <view class="swiper-item uni-bg-red" v-if="item.link == '/pages/index/index'" @touchmove.stop="onstoptouchmove">
          <pageIndex :jsonPage="jsonPage"></pageIndex>
        </view> -->

        <goodsList v-if="item.link == '/pages/goodsList/index'"></goodsList>
        <!-- <view class="swiper-item uni-bg-red" v-if="item.link == '/pages/goodsList/index'" @touchmove.stop="onstoptouchmove">
          <goodsList  v-if="item.link == '/pages/goodsList/index'"></goodsList>
        </view> -->

        <personal v-if="item.link == '/pages/personal/index' && refresh"></personal>
        <!-- <view class="swiper-item uni-bg-red" v-if="item.link == '/pages/personal/index'" @touchmove.stop="onstoptouchmove">
          <personal  v-if="item.link == '/pages/personal/index'"></personal>
        </view> -->

        <shoppingCart :tabIndex="tabbarIndex" :selfIndex="index" v-if="refresh && item.link == '/pages/shoppingCart/index'"></shoppingCart>
        <!-- <view class="swiper-item uni-bg-red" v-if="item.link == '/pages/shoppingCart/index'" @touchmove.stop="onstoptouchmove">
          <shoppingCart :tabIndex="tabbarIndex" :selfIndex="index" v-if="refresh"></shoppingCart>
        </view> -->
      </swiper-item>
    </swiper>

    <button open-type="share" class="share" v-if="showShare">
      <image src="../../static/icon_share.png"></image>
    </button>

    <!-- <view class="share">
      <view style="position: relative">
        <image src="../../static/icon_share.png"></image>
      </view>
    </view> -->

    <Tabbar :jsonPage="jsonPage" :tabIndex="tabbarIndex" @tabChange="tabChange"></Tabbar>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch, nextTick, onActivated } from "vue";
import { onLaunch, onShow, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getOneTemplate } from "@/utils/api";
import Tabbar from "@/components/Tabbar.vue";
import pageIndex from "@/components/pageCom/index.vue";
import goodsList from "@/components/pageCom/goodsList.vue";
import personal from "@/components/pageCom/personal.vue";
import shoppingCart from "@/components/pageCom/shoppingCart.vue";
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

const jsonPage = ref();
const pageList = ref([]);
const tabbarIndex = ref(0);
const shoppingCartRef = ref();
const refresh = ref(true);
const openId = ref(uni.getStorageSync("openId"));
// 是否开放分享
const showShare = ref(false);

onPullDownRefresh(() => {
  if (pageList.value[tabbarIndex.value].link == "/pages/index/index") {
    getOneTemplateFn();
  }
});
const title = uni.getAccountInfoSync().miniProgram.appId == "wx5725e443614a694e" ? "批批采" : "批批折";

onShareAppMessage((res) => {
  return {
    title: title,
    path: "/pages/home/index?teamId=" + uni.getStorageSync("teamId"),
  };
});

onShareTimeline((res) => {
  return {
    title: title,
    path: "/pages/home/index?teamId=" + uni.getStorageSync("teamId"),
  };
});

onReachBottom(() => {
  console.log("🚀 ~ onReachBottom ~ onReachBottom:");
});

// onMounted(() => {
//   getOneTemplateFn();
// });

onLoad((option) => {
  console.log("首页进入参数:", option);
  //扫小程序码进入
  if (option.scene) {
    let scene;
    try {
      scene = decodeURIComponent(option.scene);
    } catch (e) {
      scene = option.scene;
    }

    if (scene && scene != "undefined") {
      uni.setStorageSync("teamId", scene);
    }
  }

  if (option.teamId) {
    uni.setStorageSync("teamId", option.teamId);
  }

  getOneTemplateFn();
});

onShow(() => {
  openId.value = uni.getStorageSync("openId");
  // 暂时对所有人开放分享按钮，包括没授权的
  // if (!uni.getStorageSync("openId")) {
  // showShare.value = false
  // } else {
  // showShare.value = true
  // }
  showShare.value = true;
  if (showShare.value) {
    uni.showShareMenu();
  } else {
    uni.hideShareMenu();
  }

  refresh.value = false;
  nextTick(() => {
    refresh.value = true;
  });
});

function onstoptouchmove(val) {}

async function getOneTemplateFn() {
  let { code, data } = await getOneTemplate({
    appId: uni.getAccountInfoSync().miniProgram.appId,
    appType: 0,
  });

  if (code == 200) {
    jsonPage.value = JSON.parse(data);
    console.log("🚀 ~ getOneTemplateFn ~     jsonPage.value:", jsonPage.value);

    if (jsonPage.value[0].color) {
      uni.setStorageSync("color", String(jsonPage.value[0].color.toLowerCase()));
      uni.setStorageSync("backgroundColor", String(jsonPage.value[0].backgroundColor.toLowerCase()));
    }

    nextTick(() => {
      uni.setNavigationBarColor({
        frontColor: uni.getStorageSync("color"), //字体颜色
        backgroundColor: uni.getStorageSync("backgroundColor"), //背景颜色
      });
    });
    initAllPage();
    tabChange(0);
  }
}

//初始化所有页面
function initAllPage() {
  jsonPage.value.forEach((item: any) => {
    if (item.type == "tabbarCom") {
      pageList.value = item.data;
    }
  });
}

const cuPageData = ref();
//底部导航栏切换事件
function tabChange(tabIndex) {
  let tarbarData = {};
  jsonPage.value.forEach((item) => {
    if (item.type == "tabbarCom") {
      tarbarData = item;
    }
  });
  uni.setNavigationBarTitle({
    title: tarbarData.data[tabIndex].title,
  });

  tabbarIndex.value = tabIndex;
  cuPageData.value = pageList.value[tabbarIndex.value];
}

//页面滑动切换事件
function swiperChange(event) {
  tabbarIndex.value = event.detail.current;
}
</script>

<style lang="scss" scoped>
.content {
  // height: 100vh;
  // overflow: scroll;
  background-color: #f6f6f6;
}

.swiper {
  height: 100vh;
  overflow: hidden;
  // overflow: scroll;
}

.share {
  width: 80rpx;
  height: 80rpx;
  background-color: white;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.3);
  position: fixed;
  bottom: 14vh;
  right: 20rpx;
  border-radius: 100px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;

  image {
    width: 50%;
    height: 50%;
    position: absolute;
    z-index: 1;
  }

  button {
    border: none;
    position: absolute;
    z-index: 2;
  }
}
</style>
